<style lang="less" scoped>
@import "../assets/css/config.less";
.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.out {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.button{
  line-height: 24px;
  padding: 5px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 14px;
  margin: 0;
  width: 100%;
  letter-spacing: 2px;
  outline: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  &:hover{
    background-color: @color2;
    color: @white
  }
  &:active{
    background-color: @color3;
    color: @white
  }
  &:disabled{
    background-color: @color5;
  }
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 100;
}
</style>
<style lang="less">
  @import "../assets/css/config.less";
  #apply .ivu-select-visible .ivu-select-selection{
    border-color: @color1!important;
    box-shadow: none!important;
  }
  #apply .ivu-select-selection{
    &:hover{
      border: 1px solid @color1!important;
    }
    &:focus{
      border: 1px solid @color1!important;
    }
  }
</style>

<template>
  <div id="apply">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout class="out" :style="{padding: '20px 24px 24px','background-color': 'white','min-width': '1210px'}">
        <h3>我要申请成为：</h3>
        <Select v-model="type" style="width:200px;margin-top: 20px">
          <Option value="助教">助教</Option>
          <Option value="老师">老师</Option>
        </Select>
        <button style="width:200px;margin-top: 50px" class="button" :disabled="type.trim()===''" @click="handleSubmit">提交申请</button>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import myDropDown from "../components/myDropDown.vue";
import header from "../components/header.vue";
import { addApply } from "../api/api";
export default {
  name: "apply",
  data: function() {
    return {
      type: ""
    };
  },
  mounted() {
  },
  components: {
    myheader: header,
    'my-dropdown': myDropDown
  },
  methods: {
    handleSubmit() {
      if(this.type.trim()===''){
        return
      }
      addApply({
        target: this.type,
        user: this.$store.state.user
      })
        .then(response => {
          if (response.state === true) {
            this.$Message.success("提交成功");
            this.$router.go(-1);
          } else {
            this.$Message.error("提交失败！ " + response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
    }
  }
};
</script>